<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            background-color: pink;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>

    <div style="width: 100px;height: 100px;"></div>


    <script>
// 
//         //赋值：div.style.....
//         var div = document.getElementsByTagName("div")[0];
//         div.style.width = "1000px";
// 
//         //获取值：
// //        console.log(div.offsetWidth);
// //        console.log(div.style.width);
// //        console.log(div.style.border);
// 
//         //获取行内式和内嵌式
// //        console.log(typeof window.getComputedStyle(div,null));
// //        console.log(window.getComputedStyle(div,null).border);
// //        console.log(window.getComputedStyle(div,null)["background-color"]);
// 
// //        console.log(div.currentStyle.padding);
// //        console.log(div.currentStyle["background-color"]);
// 
// 
//         console.log(getStyle(div,"padding"));
//         console.log(getStyle(div,"background-color"));
// 
// 
//         //兼容方法获取元素样式
//         function getStyle(ele,attr){
//             if(window.getComputedStyle){
//                 return window.getComputedStyle(ele,null)[attr];
//             }
//             return ele.currentStyle[attr];
//         }
// 
		
		var div = document.getElementsByTagName("div")[0];
		div.style.width = "1000px";
		
// 		console.log(div.offsetWidth);
// 		console.log(div.style.Width);
// 		console.log(div.style.border);
		
// 		console.log(typeof window.getComputedStyle(div,null));
// 		console.log(window.getComputedStyle(div,null).border);
// 		console.log(window.getComputedStyle(div,null)["background-color"]);
// 		console.log(div.currentStyle.padding);
// 		console.log(div.currentStyle["background-color"]);
// 

		console.log(getStyle(div,"padding"));
		console.log(getStyle(div,"background-color"));
		
		function getStyle(ele,attr){
			if(window.getComputedStyle){
				return window.getComputedStyle(ele,null)[attr];
			}
			return ele.currentStyle[attr];
		}
		
    </script>


</body>
</html>